<template>
  <view>
    <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 30rpx' }"
      :head-style="{ padding: '28rpx 30rpx 10rpx' }" :head-border-bottom="false">
      <view slot="head">
        <view class="card-row u-flex head">
          <u-section title="五职矿长任职分析" color="#014833" font-size="32" :right="false"></u-section>
        </view>
      </view>
      <view slot="body">
        <u-collapse :accordion="false" ref="collapseView">
          <u-collapse-item title="技术职称占比情况" :open="true">
            <view class="card-row u-p-t-10 u-p-b-20">
              <view class="body-cont ">
                <view class=" u-m-t-10">

                  <div class=" jszc-num">
                    <div class="left">{{ countPer(dataObj.technicalTitle, dataObj.technicalTitle.upper) }}</div>
                    <div class="right">{{ countPer(dataObj.technicalTitle, dataObj.technicalTitle.below) }}</div>
                  </div>
                  <div class="jszc">
                    <div class="left" :style="{ width: countPer(dataObj.technicalTitle, dataObj.technicalTitle.upper) }">
                    </div>
                    <div class="right" :style="{ width: countPer(dataObj.technicalTitle, dataObj.technicalTitle.below) }">
                    </div>
                  </div>
                  <div class=" jszc-tag">
                    <div class="left">
                      <span class="tag"></span>
                      <span class="level">中级以上:</span>
                      <span class="num">{{ dataObj.technicalTitle.upper }}人</span>
                    </div>
                    <div class="right">
                      <span class="tag"></span>
                      <span class="level">中级以下:</span>
                      <span class="num">{{ dataObj.technicalTitle.below }}人</span>
                    </div>
                  </div>
                </view>
              </view>
            </view>
          </u-collapse-item>

          <u-collapse-item title="工作经验符合情况" :open="true">
            <view class="card-row u-p-t-10 u-p-b-20">
              <view class="body-cont ">
                <view class=" u-m-t-10">

                  <div class=" jszc-num">
                    <div class="left">{{ countPer(dataObj.workExperience, dataObj.workExperience.conform) }}</div>
                    <div class="right">{{ countPer(dataObj.workExperience, dataObj.workExperience.no_conform) }}</div>
                  </div>
                  <div class="jszc">
                    <div class="left"
                      :style="{ width: countPer(dataObj.workExperience, dataObj.workExperience.conform) }">
                    </div>
                    <div class="right"
                      :style="{ width: countPer(dataObj.workExperience, dataObj.workExperience.no_conform) }"></div>
                  </div>
                  <div class=" jszc-tag">
                    <div class="left">
                      <span class="tag"></span>
                      <span class="level">符合:</span>
                      <span class="num">{{ dataObj.workExperience.conform }}人</span>
                    </div>
                    <div class="right">
                      <span class="tag"></span>
                      <span class="level">不符合:</span>
                      <span class="num">{{ dataObj.workExperience.no_conform }}人</span>
                    </div>
                  </div>
                </view>
              </view>
            </view>
          </u-collapse-item>

          <u-collapse-item title="在职时长" :open="true">
            <view class="card-row u-p-t-10 u-p-b-20">
              <view class="body-cont ">

                <view class="charts-box u-m-t-10">
                  <qiun-data-charts type="pie" :opts="optsZZSC" :chartData="chartDataZZSC" />
                </view>
              </view>
            </view>
          </u-collapse-item>

          <u-collapse-item title="工作年限" :open="true">
            <view class="card-row u-p-t-10 u-p-b-20">
              <view class="body-cont ">

                <view class="charts-box u-m-t-10">
                  <qiun-data-charts type="pie" :opts="optsGZNX" :chartData="chartDataGZNX" />
                </view>
              </view>
            </view>
          </u-collapse-item>

          <u-collapse-item title="学历情况" :open="true">
            <view class="card-row u-p-t-10 u-p-b-20">
              <view class="body-cont ">

                <view class="charts-box u-m-t-10">
                  <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
                </view>
              </view>
            </view>

          </u-collapse-item>
        </u-collapse>
      </view>
    </u-card>
  </view>
</template>
<script>
export default {
  watch: {
    'customerNo': {
      immediate: true,
      handler: function (newval) {

        if (newval) {
          this.getServerData();
        }
      },
    },
  },
  props: {
    customerNo: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      dataObj: {
        "technicalTitle": {
          "below": '',
          "total": '',
          "upper": ''
        },
        "education": {
          "benke_count": '',
          "total": '',
          "gzyx_count": '',
          "gz_count": '',
          "yjs_count": '',
          "zhongzhi_count": '',
          "dazhuan_count": ''
        },
        "workExperience": {
          "total": '',
          "conform": '',
          "no_conform": ''
        },
        "zzsc": {
          "total": '',
          "three_year": '',
          "three_month": '',
          "three_month_year": '',
          "one_year_three": ''
        },
        "workYear": {
          "three_five": '',
          "total": '',
          "ten": '',
          "three": '',
          "five_ten": ''
        }
      },
      chartData: {},
      chartDataZZSC: {},
      chartDataGZNX: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
          "#ea7ccc"
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
      optsZZSC: {
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
          "#ea7ccc"
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
      optsGZNX: {
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
          "#ea7ccc"
        ],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      }
    };
  },
  created () {

  },
  methods: {
    countPer (obj, val) {
      let txt = ''
      const num = (val / obj.total * 100).toFixed(2) + '%'
      if (num.indexOf('NaN') == -1) {
        txt = num
      }
      return txt
    },
    getServerData () {

      this.$post(`/staffing/sumFivePosts`, { customerNo: this.customerNo }).then(result => {
        if (result.body) {
          this.dataObj = result.body
          const { education, zzsc, workYear } = result.body

          let res = {
            series: [{
              data: [{
                "name": "高中以下",
                "value": education.gzyx_count,
                "labelShow": false
              }, {
                "name": "大专",
                "value": education.dazhuan_count,
                "labelShow": false
              }, {
                "name": "中职",
                "value": education.zhongzhi_count,
                "labelShow": false
              }, {
                "name": "高中",
                "value": education.gz_count
              }, {
                "name": "本科",
                "value": education.benke_count,
                "labelShow": false
              }, {
                "name": "研究生及以上",
                "value": education.yjs_count,
                "labelShow": false
              }]
            }]
          };
          this.chartData = JSON.parse(JSON.stringify(res));

          let resZZSC = {
            series: [{
              data: [{
                "name": "3个月以下",
                "value": zzsc.three_month,
                "labelShow": false
              }, {
                "name": "3个月~1年",
                "value": zzsc.three_month_year,
                "labelShow": false
              }, {
                "name": "1-3年",
                "value": zzsc.one_year_three,
                "labelShow": false
              }, {
                "name": "3年以上",
                "value": zzsc.three_year
              }]
            }]
          };
          this.chartDataZZSC = JSON.parse(JSON.stringify(resZZSC));

          let resGZNX = {
            series: [{
              data: [{
                "name": "3年以下",
                "value": workYear.three,
                "labelShow": false
              }, {
                "name": "3-5年",
                "value": workYear.three_five,
                "labelShow": false
              }, {
                "name": "5-10年",
                "value": workYear.five_ten,
                "labelShow": false
              }, {
                "name": "10年以上",
                "value": workYear.ten
              }]
            }]
          };
          this.chartDataGZNX = JSON.parse(JSON.stringify(resGZNX));
          //
          const that = this;
          that.$nextTick(() => {
            uni.showLoading();
            setTimeout(() => {
              that.$refs.collapseView.init();
              uni.hideLoading();
            }, 500);
          });
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body-cont {
  box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
  border-radius: 12rpx;
  padding: 20rpx;
  width: 98%;
  margin: auto;

  h4 {
    color: #333;
    font-size: 30rpx;
  }
}


.jszc {
  width: 100%;

  .left,
  .right {
    display: inline-block;
    height: 24px
  }

  .left {
    //background-image: url("/static/image/personnelAllocationStatistics/left.png");
    background-color: rgb(55, 132, 255);
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
  }

  .right {
    //background-image: url("/static/image/personnelAllocationStatistics/right.png");
    background-color: rgb(240, 204, 24);
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
  }
}

.jszc-num {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;

  .left {
    color: rgb(55, 132, 255)
  }

  .right {
    color: rgb(240, 204, 24)
  }
}

.jszc-tag {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;

  .tag {
    width: 22px;
    height: 10px;
    border-radius: 11px;
    display: inline-block
  }

  .level {
    font-size: 12px;
    color: rgb(153, 153, 153);
    margin: 0 5px
  }

  .num {
    color: rgb(51, 51, 51)
  }

  .left {
    .tag {
      background: rgb(55, 132, 255)
    }
  }

  .right {
    .tag {
      background: rgb(240, 204, 24)
    }
  }
}

.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>